<template>
  <div class="mod-config box_check" v-if="shows">
    <basic-container>
      <!--新增跳转-->
      <div class="boxsty zhiBiao">
        <div>
          <div class="check_header">
            <div class="portrait">
              <img v-if="from.srcUrl == ''" src="/img/moren.png" alt="" />
              <img else :src="from.srcUrl" alt="" />
            </div>
            <div>
              <div class="con_1">
                <div>任务名称：</div>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="from.faqiName"
                  placement="top-start"
                >
                  <div
                    style="
                      text-overflow: ellipsis;
                      width: 240px;
                      overflow: hidden;
                      height: 30px;
                      white-space: nowrap;
                    "
                  >
                    {{ from.faqiName }}
                  </div>
                </el-tooltip>
              </div>
              <div class="con_1" style="font-weight: 900">
                <div>被考核人姓名：</div>
                <span>{{ from.ryName }}</span>
              </div>
              <div class="con_1">
                <div>被考核人职级：</div>
                <div
                  style="
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                  "
                >
                  {{ from.userZj }}
                </div>
              </div>
              <div class="con_1">
                <div>被考核人岗位：</div>
                <div
                  style="
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                  "
                >
                  {{ from.userZw }}
                </div>
              </div>
              <div class="con_1">
                <div>合同有效期：</div>
                <div>
                  {{ from.rwYxqq }}<span class="mg-0-10">至</span
                  >{{ from.rwYxqz }}
                </div>
              </div>
              <div class="con_1">
                <div>合同状态:</div>
                <div>{{ from.stateExplain }}</div>
              </div>
            </div>
            <!--            图标-->
            <div style="width: 30%" class="zhibiao-carousel-box">
              <el-carousel
                indicator-position="outside"
                :interval="interval"
                height="230"
              >
                <el-carousel-item v-for="item in 3" :key="item" height="230">
                  <div v-if="item == 1">
                    <div class="righttop" id="ckecharts"></div>
                  </div>
                  <div v-if="item == 2">
                    <div class="righttop" id="linecharts">折线图</div>
                  </div>
                  <div v-if="item == 3">
                    <div class="righttop" id="piecharts">饼图</div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
            <div>
              <div style="text-align: center">
                <div class="defen" ><span v-if="from.score">{{ from.score }}分</span><span v-else>无</span></div>
                <el-button type="primary" @click="close">返回</el-button>
              </div>
            </div>
          </div>
          <el-divider></el-divider>
          <el-table
            :data="dataList"
            style="width: 100%"
            height="60vh"
            class="box_check"
          >
            <el-table-column
              type="index"
              width="60"
              header-align="center"
              align="center"
              label="序号"
            ></el-table-column>
            <el-table-column
              prop="batchNumber"
              width="60"
              header-align="center"
              align="center"
              label="批次"
            ></el-table-column>
            <el-table-column
              prop="renwuName"
              label="任务名称"
              min-width="110"
              header-align="center"
              align="center"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              label="难度系数"
              header-align="center"
              align="center"
            >
              <el-table-column
                prop="zycd"
                header-align="center"
                align="center"
                label="重要程度"
                min-width="100"
              >
                <template slot="header" slot-scope="scope">
                  <span style="margin-right: 15px">重要程度</span>
                  <el-tooltip class="item" effect="dark" placement="top-start">
                    <div slot="content">
                      说明：<br />
                      1. 重要程度高，是指重点任务对集团层面有重要影响；<br />
                      2. 重要程度较高，是指重点任务对公司层面有重要影响；<br />
                      3. 重要程度一般，是指重点任务对部门层面有重要影响；<br />
                    </div>
                    <i class="el-icon-info" style="color: #3e51a3"></i>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column
                prop="wcnd"
                header-align="center"
                align="center"
                label="完成难度"
                min-width="100"
              >
                <template slot="header" slot-scope="scope">
                  <span style="margin-right: 15px">完成难度</span>
                  <el-tooltip class="item" effect="dark" placement="top-start">
                    <div slot="content">
                      说明：<br />
                      1. 完成难度高，是指重点任务创新性强、协调难度大；<br />
                      2.完成难度较高，是指重点任务有一定创新性、需要争取政策支持；<br />
                      3.完成难度一般，是指重点任务有一定难度，但有专业团队支持，本部门能够独立承担工作；<br />
                    </div>
                    <i class="el-icon-info" style="color: #3e51a3"></i>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              label="任务有效期"
            >
              <el-table-column
                prop="rwYxqq"
                align="center"
                label="开始时间"
                min-width="100"
              >
              </el-table-column>
              <el-table-column
                prop="rwYxqz"
                align="center"
                label="结束时间"
                min-width="100"
              >
              </el-table-column>
            </el-table-column>
            <el-table-column
              prop="workTarget"
              label="工作目标/成效"
              min-width="120"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="weightset"
              label="权重"
              min-width="60"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="khrName"
              label="考核人"
              min-width="120"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="zp"
              label="自评分"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="pj"
              label="领导评分"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="order"
              label="其他奖惩"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="count"
              label="最终评分"
              header-align="center"
              align="center"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
    </basic-container>
  </div>
</template>

<script>
import { getList } from "@/api/hetongrenwu/zhongdian/renyuanfenzu";
import * as echarts from "echarts";
export default {
  data() {
    return {
      dialogVisible: false,
      dfdata: "",
      options: [
        { label: "2021年全员绩效考核通用流程", value: "1" },
        { label: "2021年第一季度技术合同流程", value: "2" },
      ],
      leveList: [
        { value: "1", label: "一级合同" },
        { value: "2", label: "二级合同" },
        { value: "3", label: "三级合同" },
        { value: "4", label: "四级合同" },
        { value: "5", label: "五级合同" },
      ],
      modelList: [
        { value: "0", label: "生成多个合同" },
        { value: "1", label: "多人共享业绩" },
      ],
      periodList: [
        { value: "1", label: "月度" },
        { value: "2", label: "季度" },
        { value: "3", label: "年度" },
      ],
      peopleSend: ["张三"],
      promisee: ["李四"],
      zhiList: [
        { value: "模板导出", label: "模板导出" },
        { value: "模板导入", label: "模板导入" },
      ],

      dataList: [],
      searchadvanced: true,
      searchheight: "0",
      isaddflag: "0",
      myhetongid: "",
      interval: 5000,
      from: {},
      chengduList: [],
      shows: false,
    };
  },
  methods: {
    init(data, row) {
      this.getxList();
      this.shows = true;
      this.dataList = data;
      this.from = row;
      this.$nextTick(() => {
        this.mycharts();
      });
    },
    getxList() {
      getList().then((res) => {
        this.chengduList = res.data.data;
      });
    },
    close() {
      (this.shows = false), this.$emit("childrenEvent", "关闭");
    },
    //导出
    exportExcel() {},
    mycharts() {
      //柱状图
      var chartDom = document.getElementById("ckecharts");
      var myChart = echarts.init(chartDom, {
        width: 350,
        height: 150,
      });
      var option;
      option = {
        title: {
          text: "历史成绩对比",
        },
        tooltip: {},
        legend: {
          data: ["指标"],
        },
        color: ["#173198"],
        xAxis: {
          data: ["2020", "2021", "2022"],
        },
        yAxis: {},
        series: [
          {
            barWidth: 40,
            name: "成绩",
            type: "bar",
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "top",
                },
              },
            },
            data: [85, 88, 93],
          },
        ],
      };
      option && myChart.setOption(option);
      //折线图
      var linechartsDom = document.getElementById("linecharts");
      var lineChart = echarts.init(linechartsDom, {
        width: 350,
        height: 150,
      });
      var lineOption = {
        title: {
          text: "同层级排名",
        },
        tooltip: {
          trigger: "axis",
          formatter: "{b}年<br>{a}&nbsp;{c}",
          showContent: true,
        },
        color: ["#173198"],
        xAxis: {
          data: ["2020", "2021", "2022"],
        },
        yAxis: {},
        series: [
          {
            name: "同级排名",
            type: "line",
            smooth: true,
            smoothMonotone: "x",
            emphasis: { focus: "series" },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "top",
                },
              },
            },
            data: [35, 50, 43],
          },
        ],
      };
      lineOption && lineChart.setOption(lineOption);
      //饼图
      var piechartsDom = document.getElementById("piecharts");
      var pieChart = echarts.init(piechartsDom, {
        width: 450,
        height: 150,
      });
      var pieOption = {
        tooltip: {
          trigger: "item",
        },
        title: {
          text: "指标完成值对比",
        },
        legend: {
          data: ["11"],
        },
        series: [
          {
            name: "完成值",
            type: "pie",
            radius: "100%",
            center: ["50%", "90%"],
            label: {
              normal: {
                show: true,
                formatter: "{b}\n{@2020}个",
              },
            },
            color: [
              "#6c7e9c",
              "#6adbaf",
              "#0e258c",
              "#f6c32d",
              "#6495ed",
              "#432871",
            ],
            data: [
              { value: 1, name: "-1分" },
              { value: 37, name: "完成值100%" },
              { value: 49, name: "+1分" },
              { value: 5, name: "+3分" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      pieOption && pieChart.setOption(pieOption);
    },
  },
};
</script>

<style>
.zhibiaoHead {
  border: 1px solid grey;
  text-align: center;
  line-height: 30px;
}
.check_header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.portrait {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #f5f7fa;
}
.portrait img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
.defen {
  width: 300px;
  height: 150px;
  font-size: 60px;
  line-height: 200px;
  text-align: center;
  margin-bottom: 20px;
}
.righttop {
  width: 400px;
  height: 250px;
}
.con_1 {
  height: 40px;
  line-height: 30px;
  font-size: 18px;
  display: flex;
  justify-content: flex-start;
}
.box_check .el-table th {
  background: #f2f2f2 !important;
}
/*图标轮播样式*/
.zhibiao-carousel-box .el-carousel__container {
  height: 230px !important;
}
.zhibiao-carousel-box .el-carousel__item div {
  color: #475669;
  font-size: 18px;
  margin: 0;
}
.zhibiao-carousel-box .el-carousel__button {
  width: 15px;
  height: 15px;
  border-radius: 100px;
}
</style>
